<template>
  <div class="popup-query">
    <div class="popup-header">
      <span>{{ label }}</span>
      <button class="close-btn" @click="closeClick">×</button>
    </div>
    <ul class="popup-list">
      <li v-for="(field, idx) in fields" :key="field">
        <span class="popup-label">{{ field }}：</span>
        <span class="popup-value">{{ values[idx] }}</span>
      </li>
    </ul>
    <img v-if="imgUrl" :src="imgUrl" class="popup-img" />
    <div v-if="measure" class="window-info-item">
      <span class="window-info-label">管控措施：</span>
      <span class="window-info-text">{{ measure }}</span>
    </div>
  </div>
</template>
<script setup>
import { useStationMeasures } from '@/store/stationMeasures'
import { computed } from 'vue'
const props = defineProps({
  label: String,
  fields: Array,
  values: Array,
  imgUrl: String,
})
const emit = defineEmits(['close'])
function closeClick() {
  emit('close')
}
const stationMeasures = useStationMeasures()
const measure = computed(() => stationMeasures.measures[props.label])
</script>
<style scoped>
.popup-query {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  padding: 16px;
  min-width: 220px;
}
.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  margin-bottom: 8px;
}
.close-btn {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
}
.popup-list {
  list-style: none;
  padding: 0;
  margin: 0 0 8px 0;
}
.popup-label {
  color: #888;
}
.popup-img {
  width: 100%;
  border-radius: 4px;
  margin-top: 8px;
}
</style>
